<!-- @format -->

<template>
  <!-- 新手指南详情 -->
  <view class="guideDetail">
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>
    <view class="guideDetail-content" :style="[{ top: top + 'px' }]">
      <view class="content">
        <h1>{{ detail.title }}</h1>
        <view class="conLocation">
          <view>
            <view class="locationDate">
             {{ detail.publishTime }}
            </view>
          </view>
          <button class="ortopShareBtn" open-type="share" hover-class="none">
            <view class="conShare">
              <image src="../../../static/index/share.png" mode="scaleToFill" />
              <view class="text"> 分享</view>
            </view>
          </button>
        </view>

        <view class="conText">
          <rich-text class="ql-editor" :nodes="replaceContent(detail.content)">
          </rich-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      childTitle: '一门清',
      top: 0,
      businessId: 0,
      content: '',
      detail: {},
    }
  },
  onLoad(options) {
    console.log(options.businessId)
    this.businessId = options.businessId
    this.getGuideDetail()
  },
    onShareAppMessage() {
      return {
        title: this.detail.title,
      }
    },
    onShareTimeline() {
      return {
        title: this.detail.title,
      }
    },
  methods: {
	  onShareAppMessage() {
	  return {
	      title: '一门清',
	      imageUrl: this.img,
	    }
	  },
	  onShareTimeline() {
	    return {
	      title: '一门清',
	      imageUrl: this.img,
	    }
	  },
    // 富文本添加列表边框样式
    replaceContent(content) {
      // console.log(content)
      if (content) {
        content = content.replace(/\<img/gi, '<img class="imgColor" ') //正则替换
        return content
      } else {
        return null
      }
    },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
    getGuideDetail() {
      let _this = this
      wx.request({
        url: _this.$httpApi.install.getGuideDetail + _this.businessId,
        method: 'GET',
        success(res) {
          console.log(res)
          if (res.data.code == 200) {
            _this.detail = res.data.data
          }
        },
      })
    },
  },
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f8fafe;
}
.imgColor {
  max-width: 100%;
  height: auto;
}
</style>

<style lang="scss" scoped>
  button {
    border: none;
    margin: 0;
    padding: 0;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: normal;
  }
  
  button::after {
    border: none;
  }
  
.guideDetail-content {
  position: absolute;
  padding: 0 30rpx;
  background: #f8fafe;
}

.content {
  margin-top: 20px;
  margin-bottom: 30rpx;
  position: relative;

  h1 {
    font-size: 40rpx;
    font-weight: bold;
    color: #303030;
  }

  .conLocation {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 40rpx;

    .locationDate {
      font-size: 28rpx;
      color: #a4a4a4;
    }

    .locationName {
      font-size: 20rpx;
      color: #a4a4a4;
      margin-top: 24rpx;
    }
  }

  .conText {
    width: 690rpx;
    border-radius: 20rpx;
    margin-top: 30rpx;
    min-height: calc(100vh - 450rpx);
    background: #ffffff;
    padding: 30rpx 20rpx;
  }

  .conShare {
    width: 79rpx;
    height: 79rpx;
    background: #fff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
  
    image {
      margin-top: 14rpx;
      width: 24.67rpx;
      height: 24.67rpx;
    }
    .text {
      font-size: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #a4a4a4;
      border: 0px solid #000 !important;
    }
  }
}
</style>
